@use 'utils/mixins';
@use 'utils/functions';

.reaction-emoji--large img {
    width: 48px;
    max-width: none;
    height: 48px;
    max-height: none;
    margin: 4px 0;
}

.Reaction {
    @include mixins.button-style--none;

    display: inline-flex;
    min-width: 28px;
    height: 24px;
    align-items: center;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 0 4px 4px 0;
    background: rgba(var(--center-channel-color-rgb), 0.08);
    color: rgba(var(--center-channel-color-rgb), 0.75);
    cursor: pointer;
    fill: rgba(var(--center-channel-color-rgb), 0.75);
    font-size: 11px;
    font-weight: 600;
    transition:
        border-color 100ms linear,
        background-color 100ms linear;
    user-select: none;

    &:hover {
        border: solid 1px rgba(#3d3c40, 0.16);
        background-color: transparent;
        color: rgba(#3d3c40, 0.75);
    }

    &:not(.Reaction--reacted) {
        &:hover {
            border-color: rgba(var(--center-channel-color-rgb), 0.16);
            background-color: functions.v(center-channel-bg);
            color: rgba(var(--center-channel-color-rgb), 0.75);
            fill: rgba(var(--center-channel-color-rgb), 0.75);
        }

        &:active {
            background-color: rgba(var(--button-bg-rgb), 0.08);
            color: functions.v(button-bg);
            fill: functions.v(button-bg);
        }
    }

    &.Reaction--read-only {
        cursor: default;
    }

    &.Reaction__add {
        position: relative;
        font-size: 20px;
        line-height: 0;
        vertical-align: middle;

        &.Reaction__add--open {
            background-color: rgba(var(--button-bg-rgb), 0.08);
            color: functions.v(button-bg);
            fill: functions.v(button-bg);
            opacity: 1;
            visibility: visible;
        }
    }

    &__emoji {
        min-width: 16px;
        max-width: 16px;
        min-height: 16px;
        max-height: 16px;
        margin: 0 2px 0 0;
        object-fit: contain;
        vertical-align: middle;
    }

    &__emoji--post-menu {
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }

    &__count {
        display: flex;
        overflow: hidden;
        flex-direction: row-reverse;
        justify-content: flex-start;
        line-height: 16px;
        pointer-events: none;
    }

    &.Reaction--reacted,
    &.Reaction--reacting {
        border-color: functions.v(button-bg);
        background-color: rgba(var(--button-bg-rgb), 0.08);
        color: functions.v(button-bg);

        &:hover {
            border-color: functions.v(button-bg);
            background: functions.v(center-channel-bg);
        }

        &:active {
            background-color: rgba(var(--button-bg-rgb), 0.08);
            color: functions.v(button-bg);
            fill: functions.v(button-bg);
        }
    }

    &.Reaction--reacting {
        transition: border-color 200ms ease-in-out;

        .Reaction__number--display {
            visibility: hidden;
        }

        .Reaction__number--reacted,
        .Reaction__number--unreacted {
            display: inline-block;
            animation-duration: 200ms;
            animation-fill-mode: forwards;
            animation-name: reacted-anim;
            animation-timing-function: ease-in-out;
        }
    }

    &.Reaction--unreacting {
        transition: border-color 200ms ease-in-out;

        .Reaction__number--display {
            visibility: hidden;
        }

        .Reaction__number--reacted,
        .Reaction__number--unreacted {
            display: inline-block;
            animation-direction: reverse;
            animation-duration: 200ms;
            animation-fill-mode: forwards;
            animation-name: reacted-anim;
            animation-timing-function: ease-in-out;
        }
    }

    .Reaction__number {
        position: relative;

        &--display {
            display: inline-block;
        }

        &--reacted {
            position: absolute;
            top: 100%;
            left: 0;
            display: none;
        }

        &--unreacted {
            position: absolute;
            top: 0%;
            left: 0;
            display: none;
        }
    }
}

@keyframes reacted-anim {
    from { transform: translateY(0%); }
    to { transform: translateY(-100%); }
}
